<template>
  <div>
    <el-row :gutter="10" style="margin-left: 5px; margin-top: 5px; margin-right: 5px">
      <!-- 工程信息 -->
      <el-col :span="8">
        <el-card style="height: 780px" v-loading="engLoading">
          <div slot="header" class="search-header">
            <div class="show_title">工程目录：</div>
            <el-input v-model="engQueryParams.engName" placeholder="搜索工程" clearable @keyup.enter.native="searchEng"
                      class="my_input"/>
            <div class="button-group">
              <el-button type="primary" icon="el-icon-search" size="mini" @click="searchEng" style="margin-left: 10px">
                搜索
              </el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetEng">重置</el-button>
            </div>
          </div>
          <div class="engs-container" ref="engsContainer">
            <div
              class="eng-row"
              v-for="eng in engList"
              :key="eng.id"
              @click="selectEng(eng)"
              :class="{ selected: eng === selectedEng }"
            >
              <!-- 图标和工程名称列 -->
              <div style="flex: 1; display: flex; align-items: center;">
                <i class="folder-icon eng-folder-icon" style="margin-right: 10px;"></i>
                <div slot="reference" class="name-wrapper" style="flex: 1;">
                  <span class="folder-name" style="display: inline-block; width: 100%; word-wrap: break-word; white-space: normal;">{{ eng.engName }}</span>
                </div>
              </div>
              <!-- 工程编号列 -->
              <div style="flex: 1; padding-right: 10px;">
                <span class="folder-name">{{ eng.engNo }}</span>
              </div>
              <!-- 审核状态列 -->
              <div style="flex: 1; padding-right: 10px;">
                <span class="folder-name">{{ eng.yuLiuB }}</span>
              </div>
            </div>

          </div>
          <!--分页组件-->
          <div class="pagination-container">
            <!-- 分页信息 -->
            <el-pagination
              @size-change="handleSizeChangeEng"
              @current-change="handleCurrentChangeEng"
              :current-page.sync="engQueryParams.pageNum"
              :page-size.sync="engQueryParams.pageSize"
              layout="total, prev, pager, next, jumper"
              :pager-count="5"
              :total="engTotal"
            ></el-pagination>
          </div>
        </el-card>
      </el-col>
      <!-- 案卷信息 -->
      <el-col :span="9">
        <el-card style="height: 780px" v-loading="volumeLoading">
          <div slot="header" class="search-header">
            <div class="show_title">案卷目录：</div>
            <el-input v-model="volumeQueryParams.anJuanName" placeholder="搜索案卷" clearable
                      @keyup.enter.native="searchVolume" class="my_input"/>
            <div class="button-group">
              <el-button type="primary" icon="el-icon-search" size="mini" @click="searchVolume"
                         style="margin-left: 10px">搜索
              </el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetVolume">重置</el-button>
            </div>
          </div>
          <div class="engs-container" ref="volumeContainer">
            <div
              class="eng-row"
              v-for="volume in volumeList"
              :key="volume.id"
              @click="selectVolume(volume)"
              :class="{ selected: volume === selectedVolume }"
            >
              <i class="folder-icon volume-folder-icon"></i>
              <div slot="reference" class="name-wrapper">
                <span class="folder-name" style="display: inline-block; width: 100%; word-wrap: break-word; white-space: normal;">{{ volume.anJuanName }}</span>
              </div>
            </div>
          </div>
          <div class="pagination-container">
            <!-- 分页信息 -->
            <el-pagination
              @size-change="handleSizeChangeVolume"
              @current-change="handleCurrentChangeVolume"
              :current-page.sync="volumeQueryParams.pageNum"
              :page-size.sync="volumeQueryParams.pageSize"
              layout="total, prev, pager, next, jumper"
              :pager-count="5"
              :total="volumeTotal"
            ></el-pagination>
          </div>
        </el-card>
      </el-col>
      <!-- 文件信息 -->
      <el-col :span="7">
        <el-card style="height: 780px" v-loading="fileLoading">
          <div slot="header" class="search-header">
            <div class="show_title button-group" style="margin-bottom: 5px">文件列表：</div>
            <div class="button-group" style="margin-left: auto">
              <!--              <el-button type="primary" size="mini" @click="downloadFile" v-if="currentInfo === 'file'">下载</el-button>-->
              <el-button type="primary" size="mini" @click="downloadFiles" v-if="downloadFlag">下载</el-button>
              <el-button type="primary" size="mini" @click="downloadChange" v-if="fileList.length > 0">
                {{ downloadFlag ? '取消' : '批量下载' }}
              </el-button>
            </div>
          </div>
          <div class="engs-container" ref="fileContainer">
            <div class="eng-row" v-for="file in fileList" :key="file.id" @click="selectFile(file)" @dblclick="openFile(file)"
                 :class="{ 'selected': file === selectedFile }">             <!--@dblclick="openFile(file)"-->

              <input type="checkbox" v-model="file.selected" @click.stop="selectFiles(file)" v-if="downloadFlag"/>
              <i class="folder-icon file-folder-icon"></i>
              <div slot="reference" class="name-wrapper">
                <span size="medium" class="folder-name" style="display:inline-block;width:100%;word-wrap:break-word;white-space:normal;">{{ file.filename }}</span>
              </div>
            </div>
          </div>
          <div class="pagination-container">
            <!-- 分页信息 -->
            <el-pagination
              @size-change="handleSizeChangeFile"
              @current-change="handleCurrentChangeFile"
              :current-page.sync="fileQueryParams.pageNum"
              :page-size.sync="fileQueryParams.pageSize"
              layout="total, prev, pager, next"
              :pager-count="5"
              :total="fileTotal"
            ></el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!--eng-info-pre是一个组件，用于展示更完整的工程。
    :eng-info="selectedEng"将勾选的工程对象selectedEng属性组件eng-info-pre。
    @updateEngInfo="getEngList"监听updateEngInfo事件，当事件触发时调用getEngList方法-->
    <el-row :gutter="10" style="margin-left: 5px;margin-top: 5px;margin-right: 5px">
      <el-card>
        <el-row v-show="currentInfo === 'eng'">
          <el-col :span="24">
            <eng-info-pre :eng-info="selectedEng" @updateAfeng="getEngList"></eng-info-pre>
          </el-col>
        </el-row>

        <el-row v-show="currentInfo === 'volume'">
          <el-col :span="24">
            <volume-info :volume-info="selectedVolume" @updateAfanjuan="getVolumeList"></volume-info>
          </el-col>
        </el-row>

        <el-row v-show="currentInfo === 'file'">
          <el-col :span="24">
            <file-info :file-info="selectedFile" @updateAffile="getFileList"></file-info>
          </el-col>
        </el-row>
      </el-card>
    </el-row>


    <el-dialog :visible.sync="videoDialogVisible" center v-loading="loadingMp4" title="文件详情" :before-close="handleVideoDialogClose">
      <video :src="videoUrl"
             autoplay="autoplay"
             ref="vueRef"
             controls width="100%">
        Your browser does not support the video tag.
      </video>
    </el-dialog>

    <!--&lt;!&ndash;打开文件弹窗&ndash;&gt;-->
    <!--    <el-dialog-->
    <!--      title="文件信息"-->
    <!--      :visible.sync="dialogVisible"-->
    <!--      width="50%">-->

    <!--      <iframe-->
    <!--        :src="fileUrl"-->
    <!--        frameborder="0"-->
    <!--        style="width: 100%; height: 400px;">-->
    <!--      </iframe>-->

    <!--      <span slot="footer" class="dialog-footer">-->
    <!--      <el-button @click="dialogVisible = false">关闭</el-button>-->
    <!--    </span>-->
    <!--    </el-dialog>-->

    <!-- 文件显示弹窗 -->
    <el-dialog :visible.sync="pdfDialogVisible" title="文件详情" :width="dialogWidth" center v-dialog-drag v-dialog-drag-width v-dialog-drag-height :close-on-click-modal = "false">
      <embed :src="pdfUrl" type="application/pdf" width="100%" style="height: 80vh" >
    </el-dialog>
    <el-image-viewer v-if="imgDialogVisible" :zIndex="Number(99999)" :url-list="canvasList"
                     :on-close="closeImgViewer"/>


  </div>
</template>

<script>
import EngInfoPre from "@/views/system/review/engInfoPre";
import VolumeInfo from "@/views/system/review/volumeInfo";
import FileInfo from "@/views/system/review/fileInfo";
import {listEng} from "@/api/system/eng";
import {listAnjuan} from "@/api/system/anjuan";
import {downloadMore, getPdf, getType, listFile} from "@/api/system/file";

export default {
  components: {
    EngInfoPre,
    VolumeInfo,
    FileInfo,
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
  },
  data() {
    return {

      engList: [],  //工程列表
      volumeList: [],  //案卷列表
      fileList: [],  //文件列表

      engTotal: 0,  //工程总数。
      volumeTotal: 0,  //案卷总数。
      fileTotal: 0,  //文件总数。
      ifDelete: 0,//触发子组件会用的


      selectedEng: null,//选中用，通过 selectedEng 来访问选中的工程的详细信息，selectEng 方法中，当选中某个工程时，会将 selectedEng 设置为选中的工程，并触发后续操作，如获取该工程下的案卷信息。
      selectedVolume: null,//null表示一个空值或不存在的对象，{}表示一个空对象
      selectedFile: null,
      currentInfo: 'eng',

      engQueryParams: {//工程对象
        pageNum: 1,
        pageSize: 20,
        engName: null,//工程名
      },
      volumeQueryParams: {//案卷对象
        pageNum: 1,
        pageSize: 20,
        eeid: null,//审核前工程id
        anJuanName: null,
      },
      fileQueryParams: {
        pageNum: 1,
        pageSize: 20,
        eaid: null,//审核前的案卷id
        wenJianName: null,
      },



      engLoading: false,
      volumeLoading: false,
      fileLoading: false,


      canvasList: [],
      videoDialogVisible: false, // 控制弹窗的显示与隐藏
      loadingMp4: false,
      videoUrl: "", // 存储视频文件的URL地址


      blobImage: "", //图片url
      pdfUrl: "", // 存储PDF文件的URL地址
      pdfDialogVisible: false, // 控制弹窗的显示与隐藏
      imgDialogVisible: false, // 控制弹窗的显示与隐藏
      dialogWidth: "70%", // 弹窗的宽度
      dialogHeight: "80vh",
      selectedFiles: [], // 存储被选中的文件的数组
      downloadFlag: false, //下载显示勾选框
      baseURL:process.env.VUE_APP_BASE_API,
      dialogVisible: false,
      fileUrl: '',
      filename: '',


    };
  },
  created() {
    this.getEngList();
  },
  methods: {
    closeImgViewer()    {
      this.imgDialogVisible = false
    },
    searchEng() {//搜索工程
      this.engQueryParams.pageNum = 1;//用于重置分页信息
      this.getEngList();//获取工程信息列表
    },
    resetEng() {//重置
      this.engQueryParams.engName = null//engName 属性设置为 null，即清空搜索条件。
      this.ifDelete = 1;// 增加 ifDelete 的值，触发子组件的 ifDel 属性变化,用于通知子组件更新其状态或执行某些操作。
      this.volumeList = {};
      this.volumeTotal = 0;
      this.fileList = {};
      this.fileTotal = 0;//清空 volumeList和fileList，volumeTotal和fileTotal 设置为0。这意味着在重置操作后，UI 中将不显示任何案卷和文件信息。
      this.selectedEng = {};//将selectedEng 设置为空对象，表示没有选中的工程。
      this.getEngList();//获取工程信息列表
    },
    //获取工程信息
    getEngList() {
      this.engLoading = true;
      this.volumeList = [];//初始化对象{}，数组[]。
      this.fileList = [];//清空 volumeList 和 fileList，确保在获取新的工程列表时，这些列表是空的

      listEng(this.engQueryParams).then((response) => {//当listEng成功返回数据时，会执行传递给then的回调函数。listEng是api中审核前工程列表
        setTimeout(() => {
          this.engList = response.rows;//将返回的行数据赋值给 engList
          this.engTotal = response.total;//将返回的总数赋值给 engTotal
          this.engLoading = false;
        }, 300);
      })
        .catch((error) => {
          this.$message.error("获取工程信息失败:" + error);
          this.engLoading = false;//加载成功后
        });
    },

    selectEng(eng) {
      this.ifDelete = 0;
      this.selectedEng = eng;
      this.currentInfo = 'eng'
      this.volumeQueryParams.eeid = eng.id
      this.getVolumeList();
    },

    handleSizeChangeEng(pageSize) {
      this.engQueryParams.pageSize = pageSize;
      this.getEngList();
    },
    handleCurrentChangeEng(currentPage) {
      this.engQueryParams.pageNum = currentPage;
      this.getEngList();
    },

    //搜索案卷
    searchVolume() {
      this.volumeQueryParams.pageNum = 1;
      this.getVolumeList();
    },
    resetVolume() {
      // this.volumeQueryParams.eeid = null
      this.ifDelete = 1; // 增加 ifDelete 的值，触发子组件的 ifDel 属性变化
      this.volumeQueryParams.anJuanName = null;
      this.fileList = {};
      this.fileTotal = 0;
      this.selectedVolume = {};
      this.selectedFile = {};
      if (this.volumeQueryParams.eeid != null) {
        this.getVolumeList();
      }
    },
    //获取案卷信息
    getVolumeList() {
      this.volumeLoading = true;
      this.fileList = [];
      listAnjuan(this.volumeQueryParams).then((response) => {
        setTimeout(() => {
          this.volumeList = response.rows;
          this.volumeTotal = response.total;
          this.volumeLoading = false;
        }, 300);
      })
        .catch((error) => {
          this.$message.error("获取案卷信息失败:" + error);
          this.volumeLoading = false;
        });
    },
    selectVolume(volume) {
      this.ifDelete = 0;
      this.selectedVolume = volume;
      this.currentInfo = 'volume'
      this.fileQueryParams.eaid = volume.id
      this.getFileList()
    },
    handleSizeChangeVolume(pageSize) {
      this.volumeQueryParams.pageSize = pageSize;
      this.getVolumeList();
    },
    handleCurrentChangeVolume(currentPage) {
      this.volumeQueryParams.pageNum = currentPage;
      this.getVolumeList();
    },
    //获取文件信息
    getFileList() {
      this.fileLoading = true;
      listFile(this.fileQueryParams).then(response => {
        setTimeout(() => {
          this.fileList = response.rows;
          this.fileTotal = response.total;
          this.fileLoading = false;
        }, 300);
      })
        .catch((error) => {
          this.$message.error("获取文件信息失败:" + error);
          this.fileLoading = false;
        });
    },
    /*searchFile() {
      this.fileQueryParams.pageNum = 1;
      this.getFileList();
    },
    resetFile() {
      // this.fileQueryParams.volumeid = null
      this.fileQueryParams.filename = null;
      if (this.fileQueryParams.volumeid != null) {
        this.getFileList();
      }
    },*/



    //选中文件
    selectFile(file) {
      this.fileUrl = `${this.baseURL}${file.filepath}`;
      this.selectedFile = file;
      this.filename = file.wenJianName;
      this.filetype=file.filetype;
      this.currentInfo = "file";
    },
    //选中多个文件
    selectFiles(file) {
      // 如果文件已经选中，取消选中并从selectedFiles数组中移除
      const index = this.selectedFiles.findIndex(selectedFile => selectedFile.id === file.id);
      if (file.selected) {
        file.selected = false;
        if (index !== -1) {
          this.selectedFiles.splice(index, 1); // 使用splice方法移除指定索引的元素
        }
      } else {
        // 如果文件未选中，选中并添加到selectedFiles数组中
        file.selected = true;
        this.selectedFiles.push(file);
      }
    },
    //展开/关闭下载
    downloadChange() {
      this.fileList.forEach((file) => {
        file.selected = false; // 为每个数据对象添加selected属性，初始值为false
      });
      this.selectedFiles = [];
      this.downloadFlag = !this.downloadFlag;
    },
    //下载多个文件
    downloadFiles() {
      if (this.selectedFiles.length === 0) {
        this.$message({
          message: '请先选择要下载的文件！',
          type: 'warning'
        });
      } else if (this.selectedFiles.length === 1) {
        this.selectedFiles.forEach(file => {
          this.downloadOneFile(file);
        })
      } else {
        let ids = [];
        this.selectedFiles.forEach(file => {
          ids.push(file.id)
        })
        downloadMore(ids).then((response) => {
          // 处理接收到的二进制ZIP文件数据
          const blob = new Blob([response], {type: "application/zip"});
          const url = window.URL.createObjectURL(blob);
          // 创建一个下载链接并触发点击以下载ZIP文件
          const a = document.createElement('a');
          a.href = url;
          a.download = 'downloaded.zip';
          a.style.display = 'none';
          document.body.appendChild(a);
          a.click();
          window.URL.revokeObjectURL(url);
        });
      }
    },
    // 下载单个文件名打开文件
    downloadOneFile(file) {
      getPdf(file).then( res => {
        // 处理接收到的二进制ZIP文件数据
        const blob = new Blob([res], {type: "application/pdf"});
        const url = window.URL.createObjectURL(blob);
        // 创建一个下载链接并触发点击以下载ZIP文件
        const a = document.createElement('a');
        a.href = url;
        a.download = file.wenJianName + "." + file.filetype;
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
      })
    },
    // downloadOneFile(file) {
    //   getType(file).then((response) => {
    //     const fileType = response.toLowerCase();
    //     getPdf(file).then( res => {
    //       // 处理接收到的二进制ZIP文件数据
    //       const blob = new Blob([res], {type: "application/pdf"});
    //       const url = window.URL.createObjectURL(blob);
    //       // 创建一个下载链接并触发点击以下载ZIP文件
    //       const a = document.createElement('a');
    //       a.href = url;
    //       a.download = file.wenJianName + "." + this.filetype;
    //       a.style.display = 'none';
    //       document.body.appendChild(a);
    //       a.click();
    //       window.URL.revokeObjectURL(url);
    //     })
    //   })
    // },

    // openFile() {
    //   // const url = `${this.baseURL}${file.filepath}`;
    //   // window.open(url, '_blank'); // 在新标签页中打开链接
    //   // this.fileUrl = `${this.baseURL}${file.filepath}`;
    //   this.dialogVisible = true;
    // },
    // downloadFile() {
    //   const url = this.fileUrl;
    //   console.log(this.fileUrl)
    //   fetch(url)
    //     .then(response => {
    //       if (!response.ok) {
    //         throw new Error('Network response was not ok');
    //       }
    //       return response.blob();
    //     })
    //     .then(blob => {
    //       const url = window.URL.createObjectURL(blob);
    //       const a = document.createElement('a');
    //       a.href = url;
    //       // a.download = file.wenJianName.split('/').pop();
    //       a.download = this.filename + "." + this.filetype; // 文件名
    //       console.log(a.download)
    //       a.click();
    //       window.URL.revokeObjectURL(url); // 清理 URL
    //     })
    //     .catch(error => {
    //       console.error('There was an error downloading the file:', error);
    //     });
    // },
    openFile(file) {
      const filetype = this.filetype; // 这里假设 this.filetype 已经是一个字符串
      const lowerCaseFileType = filetype.toLowerCase();
      switch (lowerCaseFileType) {
        case 'pdf':
          this.openPDF(file);
          break;
        case 'jpg':
          this.openImg(file);
          break;
        case 'jpeg':
          this.openImg(file);
          break;
        case 'tif':
          this.openTiff(file);
          break;
        case 'tiff':
          this.openTiff(file);
          break;
        case 'gif':
          this.openImg(file);
          break;
        case 'mp4':
          this.openMp4(file);
          break;
        default:
          console.error('Unsupported file type:', filetype);
          alert('Unsupported file type. Please check the file and try again.');
      }
    },
    // openFile(file) {
    //   getType(file).then((response) => {
    //     const filetype = response.toLowerCase(); // 转换为小写以确保比较不区分大小写
    //     if (filetype === 'pdf') {
    //       this.openPDF(file);
    //     } else if (filetype === 'jpg' || filetype === 'jpeg' || filetype === 'tif' || filetype === 'gif') {
    //       this.openImg(file);
    //     } else if (filetype === 'tiff') {
    //       this.openTiff(file);
    //     } else if (filetype === 'mp4') {
    //       this.openMp4(file);
    //     }
    //   });
    // },
    // 打开图片
    openImg(file) {
      this.canvasList = [];
      this.fileForm = file; // 将文件信息保存到fileForm中，以便在getPdf函数中使用
      getPdf(this.fileForm)
        .then((response) => {
          const blob = new Blob([response], {type: "image/jpeg"});
          this.blobImage = URL.createObjectURL(blob);
          this.canvasList.push(URL.createObjectURL(blob))
          this.imgDialogVisible = true; // 显示弹窗
        })
        .catch((error) => {
          console.error("获取图片时出错:", error);
        });
    },
    openTiff(file) {
      this.canvasList = [];
      this.fileForm = file;
      getPdf(this.fileForm).then((response) => {
        var tiff = new Tiff({buffer: response})
        for (let i = 0, len = tiff.countDirectory(); i < len; ++i) {
          tiff.setDirectory(i)
          var imgs = tiff.toDataURL() // 转化成base64
          if (imgs) {
            this.canvasList.push(imgs)
            this.imgDialogVisible = true;
          }
        }
        console.log(this.canvasList)
      }).catch((error) => {
        console.error("获取图片时出错:", error);
        // 可以添加错误处理逻辑，比如显示一个错误提示框等
      });
    },
    //打开PDF
    openPDF(file) {
      this.fileForm = file; // 将文件信息保存到fileForm中，以便在getPdf函数中使用
      getPdf(this.fileForm)
        .then((response) => {
          const blob = new Blob([response], {type: "application/pdf"});
          this.pdfUrl = URL.createObjectURL(blob);
          this.pdfDialogVisible = true; // 显示弹窗
        })
        .catch((error) => {
          console.error("Error occurred while fetching the PDF:", error);
          // 可以添加错误处理逻辑，比如显示一个错误提示框等
        });
    },
    openMp4(file) {
      this.videoDialogVisible = true; // 显示弹窗
      this.loadingMp4 = true;
      getPdf(file).then((response) => {
        const blob = new Blob([response], {type: "video/mp4"});
        this.videoUrl = URL.createObjectURL(blob);
      }).catch((error) => {
        console.error("获取文件时出错:", error);
      });
      this.loadingMp4 = false;
    },

    // 双击文件名打开文件
    /*openFile(file) {
      getFileType(file).then((response) => {
        const fileType = response.toString()
        if (fileType === 'pdf') {
          this.openPDF(file);
        } else if (fileType === 'jpg' || fileType === 'jpeg' || fileType === 'tif' || fileType === 'gif' || fileType === 'png') {
          this.openImg(file);
        } else if (fileType === 'tiff') {
          this.openTiff(file);
        } else if (fileType === 'mp4') {
          this.openMp4(file);
        }
      })
    },*/
    handleSizeChangeFile(pageSize) {
      this.fileQueryParams.pageSize = pageSize;
      this.getFileList();
    },
    handleCurrentChangeFile(currentPage) {
      this.fileQueryParams.pageNum = currentPage;
      this.getFileList();
    },
    handleVideoDialogClose(done){
      this.$refs.vueRef.pause();
      done(); // 调用 done() 完成弹窗的关闭操作
    },



  },

};
</script>

<style>
/* 公共样式 */
.search-header {
  display: flex;
  align-items: center;
}

.my_input {
  margin-left: auto;
  width: 33%;
}

/*.dialog-content {
  display: flex;
  flex-direction: column;
}

.my_button {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
  margin-left: 85%;
}*/

.button-group {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.engs-container table {
  border-collapse: collapse;
  width: 100%;
}

.engs-container td {
  border: none;
  padding: 8px; /* 根据需要调整填充值 */
}

.engs-container {
  height: 600px;
  overflow-y: auto;
}

.eng-row {
  flex-basis: 100%;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.eng-row:hover {
  cursor: pointer;
  background-color: #E5F3FF;
}

.pagination-container {
  margin-top: 10px;
}

.folder-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  background-size: cover;
}

.folder-name {
  flex-grow: 1;
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my_title {
  font-size: 14px;
}

.show_title {
  font-weight: bold;
  font-size: 1.2rem;
  color: rgb(26, 115, 198);
  white-space: nowrap;
}

.dialog-content {
  display: flex;
  flex-direction: column;
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

/* 不同图标的样式 */
.eng-folder-icon {
  background-image: url("~@/assets/icons/folder/eng-icon.png");
}

.volume-folder-icon {
  background-image: url("~@/assets/icons/folder/volume-icon.png");
}

.file-folder-icon {
  background-image: url("~@/assets/icons/folder/file-icon.png");
}



/* 工程详情项的样式 */
.eng-details {
  margin-top: 5px;
  display: flex;
  flex-direction: column;
}
.eng-detail-item {
  font-size: 14px;
  color: #666;
}


/* 选中状态的样式 */
.selected {
  background-color: #CCE8FF;
}
</style>
